<template>
  <div>
    <van-list>
      <div v-for="item in treeData" :key="item.Id">
        <van-swipe-cell>
          <van-cell @click="handleEdit(item.Id)" icon="label-o">
            <template #icon>
              <div>
                <van-icon
                  v-if="item.children && !item.IsExpand"
                  name="plus"
                  @click.stop="openExpand(item)"
                />
                <van-icon
                  v-else-if="item.children && item.IsExpand"
                  name="minus"
                  @click.stop="openExpand(item)"
                />
              </div>
            </template>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">{{ item.title }}</span>
            </template>
          </van-cell>
          <template #right>
            <van-button
              v-if="hasPerm('Base_Department.Add')"
              square
              text="新增"
              type="info"
              style="height:100%; margin-left:1px"
              @click="handleAdd([item.Id])"
            />
            <van-button
              v-if="hasPerm('Base_Department.Delete')"
              square
              text="删除"
              type="danger"
              style="height:100%; margin-left:1px"
              @click="handleDelete([item.Id])"
            />
          </template>
        </van-swipe-cell>

        <div class="children" v-show="item.children && item.IsExpand">
          <!-- 嵌套自身 -->
          <ItemTree
            :treeData="item.children || []"
            @handleEdit="handleEdit"
            @handleAdd="handleAdd"
            @handleDelete="handleDelete"
          ></ItemTree>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "ItemTree",
  props: ["treeData"],
  data() {
    return {};
  },
  created() {},
  computed: {
    ...mapGetters(["hasPerm"])
  },
  methods: {
    openExpand(m) {
      m.IsExpand = !m.IsExpand;
    },
    handleEdit(id) {
      this.$emit("handleEdit", id);
    },
    handleAdd(id) {
      this.$emit("handleAdd", id);
    },
    handleDelete(ids) {
      this.$emit("handleDelete", ids);
    }
  }
};
</script>
<style scoped>
.children {
  padding-left: 10px;
}
</style>
